<script setup>
import { useAuthStore } from "@/stores/modules/auth"
import { useRouter, useRoute } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()
const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

const handleLogout = () => {
  authStore.logout()
  // 同时清除管理员token
  localStorage.removeItem('adminToken')
  router.push('/')
}
const goToAdmin = () => {
  // 检查是否已管理员登录
  const adminToken = localStorage.getItem('adminToken')
  if (adminToken) {
    router.push('/admin')
  } else {
    router.push('/admin/login')
  }
}
// 计算属性用于高亮显示
const isAdminActive = () => {
  return route.path.startsWith('/admin')
}
</script>

<template>
  <nav class="shortcut">
    <div class="wrapper">
      <ul>
        <!-- 未登录状态 -->
        <template v-if="!authStore.isAuthenticated">
          <li><a href="#" @click.prevent="goToLogin">请先登录</a></li>
          <li><a href="#" @click.prevent="goToRegister">免费注册</a></li>
        </template>

        <!-- 已登录状态 -->
        <template v-else>
          <li><span>欢迎 {{ authStore.userInfo.username || '用户' }}</span></li>
          <li><a href="#" @click.prevent="handleLogout">退出登录</a></li>
        </template>

        <!-- 其他固定链接 -->
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#">手机版</a></li>
        <li><a href="#" @click.prevent="goToAdmin" :class="{active: isAdminActive()}">后台管理系统</a></li>
      </ul>
    </div>
  </nav>
</template>
<style scoped>
/* 添加高亮样式 */
.active {
  color: #409eff !important;
  font-weight: bold;
}
</style>

